import React from "react";
import frame from '../../../style/frame.less';
import e from '../../../images/e.png'
import f from '../../../images/4.png'
import j from '../../../images/j.png'
import s from '../../../images/6.png'
import n from '../../../images/9.png'
import a from '../../../images/a.png'

class PagePart extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {

    }

    render() {
        return (
            <div className={`${frame.component} ${frame.middleContent}`}>
                <div className={frame.contentTitle}>
                    专为您设计的功能
                </div>
                <div className={frame.contentDivider}></div>
                <div className={frame.contentSubTitle}>
                    我们已为您创建了最有效的 计算服务，开发、部署和运维都将以更便捷的方式展现给您。
                </div>
                <div className={frame.contentSubject}>
                    <div className={frame.feature}>
                        <div>
                            <div className={frame.fade}>
                                <div>
                                    <img src={e} alt="" />
                                </div>
                                <div className={frame.featureTitle}>
                                    <span>即时访问</span> 资源
                                </div>
                                <div className={frame.featureDivider}></div>
                                <div className={frame.featureDesc}>
                                    通过从一个门户网站对多个 进行基于模板的配置，加快开发速度。
                                </div>
                            </div>
                        </div>
                        <div>
                            <div className={frame.fade}>
                                <div>
                                    <img src={f} alt="" />
                                </div>
                                <div className={frame.featureTitle}>
                                    控制<span>所有云资源</span>的中心
                                </div>
                                <div className={frame.featureDivider}></div>
                                <div className={frame.featureDesc}>
                                    查看并自动化管理任何云和服务器上的云资源。
                                </div>
                            </div>
                        </div>
                        <div>
                            <div className={frame.fade}>
                                <div>
                                    <img src={j} alt="" />
                                </div>
                                <div className={frame.featureTitle}>
                                    驱动云<span>成本优化</span>
                                </div>
                                <div className={frame.featureDivider}></div>
                                <div className={frame.featureDesc}>
                                    了解云使用情况，合理分配，并持续优化您的云支出。
                                </div>
                            </div>
                        </div>
                        <div>
                            <div className={frame.fade}>
                                <div>
                                    <img src={s} alt="" />
                                </div>
                                <div className={frame.featureTitle}>
                                    <span>安全</span>并且兼顾<span>适用性</span>
                                </div>
                                <div className={frame.featureDivider}></div>
                                <div className={frame.featureDesc}>
                                    私有环境，保障企业安全同时支持个性定制化功能。
                                </div>
                            </div>
                        </div>
                        <div>
                            <div className={frame.fade}>
                                <div>
                                    <img src={n} alt="" />
                                </div>
                                <div className={frame.featureTitle}>
                                    <span>无摩擦</span>控制
                                </div>
                                <div className={frame.featureDivider}></div>
                                <div className={frame.featureDesc}>
                                    基于策略的自动化治理，消除障碍，而不会牺牲控制。
                                </div>
                            </div>
                        </div>
                        <div>
                            <div className={frame.fade}>
                                <div>
                                    <img src={a} alt="" />
                                </div>
                                <div className={frame.featureTitle}>
                                    用户<span>友好</span>
                                </div>
                                <div className={frame.featureDivider}></div>
                                <div className={frame.featureDesc}>
                                    易于使用。以用户体验为基础，为您提供完美的页面管理体验。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default PagePart
